<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!--左侧统计-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <!--左侧顶部简单统计-->
        <el-row :gutter="12">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img
                class="header-left-content"
                src="@/assets/dashboard/index-head-user.png"
              />
              <div class="header-right-content">
                <span>{{ userNum }}</span>
                <span>用户数量</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img
                class="header-left-content"
                src="@/assets/dashboard/index-header-risk.png"
              />
              <div class="header-right-content">
                <span>{{ unitNum }}</span>
                <span>风险分析单元数量</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 5px">
            <div class="index-dashboard-header">
              <img
                class="header-left-content"
                src="@/assets/dashboard/index-header-alarm.png"
              />
              <div class="header-right-content">
                <span>{{ targetNum }}</span>
                <span>危险源数量</span>
              </div>
            </div>
          </el-col></el-row
        >
        <!--左侧统计内容-->
        <el-row :gutter="12" style="margin-bottom: 5px">
          <el-col :xs="24" :sm="24" :md="8" :lg="8">
            <el-card class="box-card">
              <div ref="chart0" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="16" :lg="16">
            <el-card class="box-card">
              <div ref="chart1" style="height: 300px"></div>
            </el-card>
          </el-col>
          <!-- <el-col :xs="24" :sm="24" :md="8" :lg="8">
            <el-card class="box-card">
              <div ref="chart2" style="height: 300px"></div>
            </el-card>
          </el-col> -->
        </el-row>
        <el-row :gutter="12">
          <el-col :xs="24" :sm="24" :md="16" :lg="16">
            <el-card class="box-card">
              <div ref="chart3" style="height: 350px"></div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" :lg="8">
            <el-card class="box-card">
              <div ref="chart2" style="height: 350px"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!--右侧内容-->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <!--告警--->
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" style="margin-bottom: 10px">
            <el-card class="box-card" style="height: 350px; overflow: hidden">
              <template #header>
                <div class="card-header">
                  <span>告警提示</span>
                  <el-button class="button" text>更多>></el-button>
                </div>
              </template>

              <el-table v-loading="loading" :data="alarmDataList" ref="tabRef">
                <el-table-column
                  label="序号"
                  type="index"
                  width="50"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="设备名称"
                  prop="alarmName"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="告警类型" prop="alarmType" />
                <el-table-column
                  label="告警时间"
                  prop="alarmTime"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!--快捷入口--->
        <el-row :gutter="12" style="margin-bottom: 8px">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <router-link to="/workbench/index">
              <div class="index-fast-goto">
                <img src="@/assets/dashboard/index-workbench.png" />
                <div class="index-goto-item">
                  <span>我的工作台</span>
                  <span>呈现登录用户需要处理的各类任务</span>
                </div>
              </div>
            </router-link>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <!-- <router-link to="/screen" class="index-fast-goto"> -->
            <div class="index-fast-goto" @click="gotoScreen">
              <img src="@/assets/dashboard/index-screen.png" />
              <div class="index-goto-item">
                <span>数据可视化</span>
                <span>直接打开桌面可视化大屏</span>
              </div>
            </div>
            <!-- </router-link> -->
          </el-col>
        </el-row>

        <!---下载--->
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>可视化大屏客户端程序下载</span>
            </div>
          </template>
          <div class="index-download">
            <img src="@/assets/dashboard/index_screen.png" alt="donate" />

            <el-button type="primary" @click="downloadScreen" icon="Download">
              下载可视化大屏客户端
            </el-button>
          </div>
        </el-card>
        <el-card class="update-log" style="margin-top: 8px">
          <template v-slot:header>
            <div class="clearfix">
              <span>移动端应用程序下载</span>
            </div>
          </template>
          <div class="index-download">
            <img
              src="@/assets/dashboard/index-download-phone.png"
              alt="移动端应用程序下载"
              style="width: 100px; height: 100px"
            />
            <div class="right-operation">
              <el-button type="primary" @click="downloadApp" icon="Download">
                下载移动端APP
              </el-button>
              <el-button type="primary" @click="scanloadApp">
                <svg-icon icon-class="scan" class="scan-class" />
                二维码下载APP
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--图片预览对话框-->
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup name="Index">
import {
  getIndexUserNum,
  getIndexUnitNum,
  getIndexTargetNum,
  getIndexCheckRate,
  getIndexRectifyRate,
  getIndexCheckNumByWeek,
  getIndexRectifyNumByWeek,
} from "@/api/index/dashboard";
import { takeSetting } from "@/api/common/common";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const chart0 = ref(null); //隐患整改率统计
const chart1 = ref(null); //隐患整改率统计
const chart2 = ref(null); //隐患整改率统计
const chart3 = ref(null); //隐患整改率统计
const alarmDataList = ref([]); //告警数量列表
const userNum = ref(0); //用户数量
const unitNum = ref(0); //风险分析单元数量
const targetNum = ref(0); //风险分析对象数量
const checkRateVal = ref(98); //排查率
const rectifyRateVal = ref(100); //整改率
const checkDataDate = ref([]); //隐患排查统计数据
const checkDataVal = ref([10, 52, 200, 334, 390, 330, 220]); //隐患排查统计数据
const rectifyDataDate = ref([]); //隐患治理统计数据
const rectifyTotalNum = ref([]); //隐患治理统计数据-上报数
const rectifyAcceptNum = ref([]); //隐患治理统计数据-整改书

const loading = ref(false);
const tabRef = ref(null);
const dialogImageUrl = ref("");
const apkDownloadUrl = ref("");
const screenDownloadUrl = ref("");
const dialogVisible = ref(false);
/**  获取告警列表数据 */
function getAlarmDataList() {
  for (let i = 0; i < 20; i++) {
    alarmDataList.value.push({
      alarmName: "设备" + i,
      alarmType: "高高报警",
      alarmTime: "2023-06-08 10:12:38",
    });
  }
}

/**1: 隐患排查整改率统计图 */
function getRectifyRadioChart() {
  const hiddenCompleteRateInstance = echarts.init(chart0.value);
  let option = {
    title: {
      text: "隐患整改率",
      textStyle: {
        fontSize: 15,
      },
      left: 5,
      top: 6,
    },
    grid: {
      left: "1%",
      right: "4%",
      top: "3%",
      containLabel: true,
    },
    series: [
      {
        type: "gauge", //仪表盘类型
        startAngle: 220, //仪表盘360°左侧起点
        endAngle: -40, //仪表盘360°右侧起点
        radius: "80%", //设置仪表盘外边框与中心点位置
        pointer: { show: false },
        anchor: { show: false },
        splitNumber: 8,
        axisLine: {
          //设置仪表盘周边宽度颜色
          lineStyle: {
            width: 4,
            color: [
              [0.25, "#A9C9FF"],
              [0.5, "#5E9AFF"],
              [0.75, "#2A79FC"],
              [1, "#002C99"],
            ],
          },
        },
        axisTick: {
          // 仪表盘周边线刻度是否有间隔

          show: false,
        },
        splitLine: {
          //设置小刻度的长度
          show: false,
        },

        axisLabel: {
          //设置刻度数值显示
          color: "#464646",
          fontSize: 12,
          distance: -40,
          formatter: function (value) {
            if (value === 87.5) {
              return "A";
            } else if (value === 62.5) {
              return "B";
            } else if (value === 37.5) {
              return "C";
            } else if (value === 12.5) {
              return "D";
            }
            return "";
          },
        },
        title: { show: false },
        detail: { show: false },
      },
      {
        type: "gauge", //仪表盘类型
        startAngle: 240, //仪表盘360°左侧起点
        endAngle: -60, //仪表盘360°右侧起点
        radius: "76%", //设置仪表盘外边框与中心点位置
        pointer: { show: false }, //指针设置
        anchor: { show: false }, //中心点设置
        title: { show: false },
        detail: { show: false }, //显示值
        axisLine: {
          lineStyle: {
            width: 8,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#A9C9FF" },
                  { offset: 0.3, color: "#4BAFFF" },
                  { offset: 0.7, color: "#3B7CFF" },
                  { offset: 1.0, color: "#3B7CFF" },
                ]),
              ],
            ],
          },
        }, //设置仪表盘外周边 颜色、宽度
        axisLabel: { show: false }, //设置显示刻度的数值
        axisTick: { distance: -18, show: false }, // 仪表盘周边线小刻度设置 可以设置在内外，distance负值在外
        splitLine: {
          show: false,
        },
      },

      {
        type: "gauge",
        radius: "82%",
        axisLine: {
          show: false,
        }, //设置仪表盘外周边 颜色、宽度
        axisTick: {
          show: true,
          length: 6,
          splitNumber: 2,
          lineStyle: {
            color: "#D2DFF5",
            width: 3,
          },
        },
        splitLine: { show: false },
        axisLabel: { show: false },
        anchor: { show: false },
        title: { show: false },
        pointer: { show: false },
        detail: { show: false },
      },
      {
        type: "gauge",
        radius: "62%",
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 2,
            color: [[1, "#76EAFF"]],
          },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        anchor: { show: false },
        title: { show: false },
        pointer: { show: false },
        detail: { show: false },
      },
      {
        type: "gauge",
        radius: "70%",

        axisLine: {
          show: false,
        },
        axisTick: {
          distance: 6,
          show: true,
          length: 6,
          lineStyle: {
            color: "#7FC8FF",
            width: 2,
          },
        },
        splitLine: {
          distance: 10,
          length: 12,
          lineStyle: {
            width: 2,
            color: "#56B3FA",
          },
        },
        axisLabel: {
          distance: 16,
          color: "#576B95",
          fontSize: 10,
        },
        anchor: {
          showAbove: true,
          size: 25,
          itemStyle: {
            borderWidth: 10,
          },
        },
        pointer: {
          show: true,
          width: 6,
          length: "50%",
        },
        itemStyle: {
          // 仪表盘指针样式。
          color: "#56B0FA", // 指针颜色，默认(auto)取数值所在的区间的颜色
          opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
          borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
          borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
          // borderColor: "#000",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
          shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
          shadowColor: "#fff", // 阴影颜色。支持的格式同color。
        },

        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 30,
          offsetCenter: [0, "80%"],
          color: "#5C98FC",
          formatter: "{value}%",
        },
        data: [
          {
            value: rectifyRateVal.value,
          },
        ],
      },
    ],
  };

  hiddenCompleteRateInstance.setOption(option);
}

/**2: 隐患排查统计 */
function getCheckDataChart() {
  const chart3Instance = echarts.init(chart1.value);
  let option = {
    title: {
      text: "隐患排查统计",
      textStyle: {
        fontSize: 15,
      },
      left: 20,
      top: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: checkDataDate.value,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: { show: false },
        axisLine: { show: true },
      },
    ],
    series: [
      {
        name: "排查任务数",
        type: "bar",
        barWidth: "30%",
        data: checkDataVal.value,
        color: new echarts.graphic.LinearGradient(
          1,
          0,
          0,
          0, // 表示从上到下
          [
            { offset: 1, color: "#7fb4fa" },
            { offset: 0, color: "#2F80ED" },
          ]
        ),
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
        },
      },
    ],
  };
  chart3Instance.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      chart3Instance.resize();
    };
  }, 2000);
}

/**3: 隐患治理统计 */
function getRectifyDataChart() {
  const chart4Instance = echarts.init(chart3.value);
  let option = {
    title: {
      text: "隐患治理统计",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["上报数", "整改数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: rectifyDataDate.value, //["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
      splitLine: { show: false },
      axisLine: { show: true },
    },
    series: [
      {
        name: "上报数",
        data: rectifyTotalNum.value,
        type: "line",
        smooth: true,
        color: "#0091FF",
      },
      {
        name: "整改数",
        data: rectifyAcceptNum.value,
        type: "line",
        smooth: true,
        color: "#00CAF7",
      },
    ],
  };
  chart4Instance.setOption(option);
}
/**4: 隐患排查率统计图 */
function getTaskComplateRateChart() {
  const hiddenCompleteRateInstance = echarts.init(chart2.value);
  let option = {
    title: {
      text: "隐患排查率",
      textStyle: {
        fontSize: 15,
      },
      left: 20,
      top: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "3%",
      containLabel: true,
    },
    series: [
      {
        type: "gauge",
        radius: "82%",
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 2,
            color: [[1, "#76EAFF"]],
          },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        anchor: { show: false },
        title: { show: false },
        pointer: { show: false },
        detail: { show: false },
      },
      {
        type: "gauge",
        radius: "78%",
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 18,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#67EDFF" },
                  { offset: 0.3, color: "#67EEFF" },
                  { offset: 0.7, color: "#67CBFF" },
                  { offset: 1.0, color: "#2651EF" },
                ]),
              ],
            ],
          },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        anchor: { show: false },
        title: { show: false },
        pointer: { show: false },
        detail: { show: false },
      },
      {
        type: "gauge",
        radius: "63.5%",
        // progress: {
        //   show: true,
        //   width: 18,
        // },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 2,
            color: [[1, "#76EAFF"]],
          },
        },
        axisTick: {
          distance: 20,
          show: true,
          length: 10,
          lineStyle: {
            color: "#56B3FA",
            width: 2,
          },
        },
        splitLine: {
          distance: 10,
          length: 18,
          lineStyle: {
            width: 4,
            color: "#56B3FA",
          },
        },
        axisLabel: {
          distance: 10,
          color: "#5C98FC",
          fontSize: 10,
        },
        anchor: {
          showAbove: true,
          size: 25,
          itemStyle: {
            borderWidth: 10,
          },
        },
        pointer: {
          show: true,
          width: 6,
          length: "50%",
        },
        itemStyle: {
          // 仪表盘指针样式。
          color: "#5C98FC", // 指针颜色，默认(auto)取数值所在的区间的颜色
          opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
          borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
          borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
          // borderColor: "#000",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
          shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
          shadowColor: "#fff", // 阴影颜色。支持的格式同color。
        },

        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 30,
          offsetCenter: [0, "80%"],
          color: "#5662FA",
          formatter: "{value}%",
        },
        data: [
          {
            value: checkRateVal.value,
          },
        ],
      },
    ],
  };

  hiddenCompleteRateInstance.setOption(option);
}

/** 下载移动端APP */
function downloadApp() {
  const link = document.createElement("a");
  link.href = apkDownloadUrl.value;
  link.setAttribute("download", ""); // 设置文件属性为下载
  document.body.appendChild(link); // 将元素插入到 DOM 中
  link.click(); // 模拟点击下载链接进行下载
  document.body.removeChild(link); // 下载完成后移除元素
}
/** 扫码下载移动端APP */
function scanloadApp() {
  dialogVisible.value = true;
}
/** 下载可视化大屏 */
function downloadScreen() {
  const a = document.createElement("a");
  a.href = screenDownloadUrl.value;
  a.click();
}
/**头部- 获取用户统计数 */
function getUserNum() {
  getIndexUserNum().then((response) => {
    userNum.value = response.data;
  });
}
/** 头部-获取风险分析单元数量 */
function getUnitNum() {
  getIndexUnitNum().then((response) => {
    unitNum.value = response.data;
  });
}
/** 头部-获取风险分析对象数量 */
function getTargtNum() {
  getIndexTargetNum().then((response) => {
    targetNum.value = response.data;
  });
}
/**1: 获取隐患整改率 */
function getRectifyRateNum() {
  getIndexRectifyRate().then((response) => {
    rectifyRateVal.value = response.data;
    getRectifyRadioChart();
  });
}
/**2 获取隐患排查统计数据 */
function getCheckData() {
  getIndexCheckNumByWeek().then((response) => {
    checkDataDate.value = [];
    checkDataVal.value = [];
    response.data.forEach((item, index) => {
      checkDataDate.value.push(item.hiddenDate);
      checkDataVal.value.push(item.submitNum);
    });
    console.log("隐患排查统计", checkDataVal.value);
    getCheckDataChart();
  });
}
/**3 获取隐患治理统计数据 */
function getRectifyData() {
  getIndexRectifyNumByWeek().then((response) => {
    rectifyDataDate.value = [];
    response.data.forEach((item, index) => {
      rectifyDataDate.value.push(item.hiddenDate);
      rectifyTotalNum.value.push(item.submitNum);
      rectifyAcceptNum.value.push(item.rectifyNum);
    });
    getRectifyDataChart();
  });
}
/**4： 获取隐患排查率 */
function getCheckRateNum() {
  getIndexCheckRate().then((response) => {
    checkRateVal.value = response.data;
    getTaskComplateRateChart();
  });
}

/** BS大屏跳转 */
function gotoScreen() {
  window.open("/screen");
}
/** 获取一般性设置 */
function getConfig() {
  takeSetting().then((res) => {
    console.log(res.data);
    if (res.data.length > 0) {
      res.data.forEach((item) => {
        if (item.commonKey == "APP_URL") {
          apkDownloadUrl.value = item.commonValue;
        } else if (item.commonKey == "APP_IMG") {
          dialogImageUrl.value = item.commonValue;
        } else if (item.commonKey == "SCREEN_URL") {
          screenDownloadUrl.value = item.commonValue;
        }
      });
    }
  });
}
getConfig();
getUserNum();
getUnitNum();
getTargtNum();

//getCheckData();
/** 初始化加载统计表加载 */
onMounted(() => {
  //1：获取隐患整改统计ok
  getRectifyRateNum();
  //2：获取隐患排查统计
  getCheckData();
  // 3:获取隐患治理统计
  getRectifyData();
  //4：获取隐患任务完成率统计ok
  getCheckRateNum();
});
getAlarmDataList();
</script>

<style scoped lang="scss">
.right-operation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.scan-class {
  margin-right: 6px;

  filter: brightness(100);
}
</style>
